﻿var win   = $(window),
    body  = null,
    isMenuOpened    = false,
    isSubMenuOpened = false,
    isSubMenuOnTop  = false,
    hasSubMenu      = false,
    ifTargetIsNotMenu = false;    // "是否需要计算(坐标 来开闭菜单)", 如果已经有明确目标(比如页面上的按钮), 则不必进行多余的计算

$(function() {
    body = document.body;
    hasSubMenu = document.getElementById('subMenu-tit') !== null;

// loading状态控制
(function() {
    var loading = $('#loading');
    loading.css('-webkit-opacity','0');
    setTimeout(function() {
        loading.hide();
    },300);
}());
// 菜单 (包括子菜单) 控制
(function(doc, body) {
    var $body      = $(body),
        elem_width = 70,        // 元素宽高
        elem_height = 50,
        win_width  = win.width(),
        menu_width  = Math.floor(win_width * 0.72),
        menu_close_right = win_width,
        menu_close_left  = win_width - elem_width,
        menu_open_right  = win_width - menu_width,
        menu_open_left   = menu_open_right - elem_width,
        top        = elem_height,

        touch      = null,
        tapTimeout = -1,
        tapDelay   = 50,
        start_x    = 0,
        start_y    = 0,
        end_x      =0,
        end_y      = 0,
        scrollTop  = 0;

    // 因为 fixed 块上的点击会时不时发生穿透, 所以使用区域点击替代
    // 最佳的写法应该用 touchstart + touchmove + touchend 来模拟 click
    // 但完美的模拟需要经过太多计算, 这里只用了 touchend 会节省不少性能
    var abs = $('#abs');
    doc.addEventListener('touchstart', function(e) {
        if (ifTargetIsNotMenu) return;
        touch = e.touches[0];
        start_x = touch.pageX;
        start_y = touch.pageY;
    });
    doc.addEventListener('touchend', function(e) {
        if (e.changedTouches[0].pageX<menu_open_right && isMenuOpened) {
                e.preventDefault();
                closeMenu();
        }
        if (ifTargetIsNotMenu) {
            ifTargetIsNotMenu = false;
            return;
        }
        abs.text('in');
        touch = e.changedTouches[0];
        end_x = touch.pageX;
        end_y = touch.pageY;
        // 如果start和end的偏移太大(大于30px)则不触发
        if ( (Math.abs(end_x-start_x)>30) || (Math.abs(end_y-start_y)>30) ) return;
        // 首先确定点击位置是否位于按钮区域
        scrollTop = end_y - body.scrollTop;
        if ( scrollTop < top ) {
            abs.text(" scrollTop < top");
            // 如果是右上角, 这个位置有两个按钮会用到, 菜单(关闭状态)和子菜单(打开状态).
            if ( end_x > menu_close_left ) {
                if (isSubMenuOpened) {
                    $body.removeClass('subMenu-on');
                    isSubMenuOpened = false;
                    return;
                } else if (isSubMenuOnTop) {
                    $body.addClass('subMenu-on');
                    isSubMenuOpened = true;
                    return;
                } else if (!isMenuOpened) {
                    openMenu();
                }
            // 如果是左上角, 则需要判断一种可能(菜单打开状态)
            } else if ( (end_x<menu_open_right) && (end_x>menu_open_left) ) {
                if (isMenuOpened) closeMenu();
            }
        } else if (hasSubMenu && scrollTop<145 && !isSubMenuOnTop) {
            abs.text(" scrollTop < 145");
            isSubMenuOpened = true;
            $body.addClass('subMenu-on');
        }

    });

    // 菜单 唤出/隐藏 控制
    function openMenu() {
        body.className = 'menu-on';
        isMenuOpened = true;
        //禁用左边区域链接
         $("#index a").click(function () {
            event.preventDefault();
        });
    }
    function closeMenu() {
        body.className = '';
        isMenuOpened = false;
    }
    function menuToggle() {
        if (isMenuOpened) closeMenu();
        else openMenu();
    }
}(document, document.body));


// 点击放大控制
(function() {
    var btns    = $('.btn'),                 // 类型1 .btn 按钮
        links   = $('a.anim-active'),        // 类型2 带.active的链接
        div     = $('div.anim-active'),      // 类型3 父类带.active的链接
        temp    = $();

    // 手指一触碰(touchstart)就放大, 一松开(touchend)就还原
    btns.bind('touchstart',  start).bind('touchend', end);
    links.bind('touchstart', start).bind('touchend', end);

    function start() {
        ifTargetIsNotMenu = true;
        temp = $(this).addClass('scale-on');
    }
    function end() {
        temp.removeClass('scale-on');
    }

    div.bind('touchstart', function(e, target) {
        ifTargetIsNotMenu = true;
        target = e.target;
        while (target && target.nodeName !== 'A') {
            target = target.parentNode;
        }
        temp = $(target).addClass('scale-on');
    }).bind('touchend', function() {
        temp.removeClass('scale-on');
    });
}());

// 子栏目控制
(function() {
    // var sup  = $(document.body),
    //     tit  = $('#subMenu-tit');
    // if (!tit.length) return;
    // var cont = $('#subMenu-cont'),
    //     btn  = cont.find('.close'),
    //     isOpened = false,

    //     touch   = null,
    //     start_x =
    //     start_y =
    //     end_x   =
    //     end_y   = 0;

    // tit.on('touchstart', function(e) {
    //     ifTargetIsNotMenu = true;
    //     touch = e.touches[0];
    //     start_x = touch.pageX;
    //     start_y = touch.pageY;
    // }).on('touchend', function(e) {
    //     touch = e.changedTouches[0];
    //     end_x = touch.pageX;
    //     end_y = touch.pageY;
    //     // ifTargetIsNotMenu = false;

    //     // 如果start和end的偏移太大(大于30px), 则不触发
    //     if ( (Math.abs(end_x-start_x)>30) || (Math.abs(end_y-start_y)>30)) return;
    //     sup.addClass('subMenu-on');
    //     isSubMenuOpened = true;
    // })
    // btn.on('touchstart', function(e) {
    //     sup.removeClass('subMenu-on');
    //     e.stopPropagation();
    // });
    // cont.on('touchstart', function(e, target) {
    //     e.preventDefault();
    //     if ((target=e.target).nodeName === 'A') {
    //         window.open(target.getAttribute('href'), '_self');
    //     }
    // });
    // cont.on('touchstart', function(e) {
    //     if (e.target.nodeName !== 'A') e.preventDefault();
    // });
    // cont.on('touchmove', function(e) {e.preventDefault();});


}());

});